<template>
  <el-dialog
    :title="dialogStatus"
    :visible.sync="dialogFormVisible"
    width="70%">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="Form"
      label-position="left"
      label-width="160px">

      <h1 style="text-align: center">产品详情</h1>

      <el-form-item
        :label="$t('product.name')"
        prop="name">
        <el-input v-model="Form.name"/>
      </el-form-item>

      <el-form-item
        label="打款帐号"
      >
        <el-input v-model="Form.account"/>
      </el-form-item>

      <el-form-item :label="$t('product.productType')">
        <el-select
          v-model="Form.productType"
          class="filter-item">
          <el-option
            v-for="item in productTypeList"
            :key="item.value"
            :label="item.value"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('product.beginMoney')"
        prop="beginMoney">
        <el-input
          v-model.number="Form.beginMoney"
          :min="0"
          type="number"/>
      </el-form-item>

      <el-form-item
        :label="$t('product.productDeadline')"
        prop="productDeadline">
        <el-input v-model="Form.productDeadline"/>
      </el-form-item>

      <el-form-item
        :label="$t('product.manageRate')"
        prop="manageRate">
        <el-input
          v-model.number="Form.manageRate"
          :min="0"
          type="number"/>
      </el-form-item>

      <el-form-item
        :label="$t('product.commissionRate')"
        prop="commissionRate">
        <el-input
          v-model.number="Form.commissionRate"
          :min="0"
          type="number"/>
      </el-form-item>

      <el-form-item
        :label="$t('product.commissionRateGp')"
        prop="commissionRateGp">
        <el-select
          v-model="Form.commissionRateGp"
          class="filter-item">
          <el-option
            v-for="item in commissionRateGpList"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('product.nbCommissionRateGp')"
        prop="commissionRateGp">
        <el-select
          v-model="Form.nbCommissionRateGp"
          class="filter-item">
          <el-option
            v-for="item in commissionRateGpList"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <h1 style="text-align: center">其它</h1>

      <el-form-item :label="$t('product.incomeExplain')">
        <el-input
          :autosize="{ minRows: 6, maxRows: 4}"
          v-model="Form.incomeExplain"
          type="textarea"/>
      </el-form-item>

      <el-form-item :label="$t('product.coreHighlights')">
        <el-input
          :autosize="{ minRows: 6, maxRows: 4}"
          v-model="Form.coreHighlights"
          type="textarea"/>
      </el-form-item>

      <el-form-item :label="$t('product.eduInfo')">
        <el-input
          :autosize="{ minRows: 6, maxRows: 4}"
          v-model="Form.eduInfo"
          type="textarea"/>
      </el-form-item>

      <el-alert
        v-if="loading"
        :closable="false"
        title="文件上传中请稍等.........."
        type="warning"
        center
      />

      <el-form-item label="产品相关资料:">
        <el-upload
          :action="apibase + '/admin/ajax/upload'"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :on-remove="handleAvatarRemove"
          :before-upload="beforeAvatarUpload"
          :file-list="Form.pdflist"
          class="product-upload-pdf">
          <div
            slot="tip"
            class="el-upload__tip">请上传pdf，且不超过100m</div>
          <el-button
            size="small"
            type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item
        v-if="dialogStatus.indexOf('编辑') != -1"
        label="通知产品更新">
        <el-checkbox v-model="Form.notice"/>
      </el-form-item>

      <el-form-item label="权重">
        <el-input
          v-model.number="Form.weigh"
          :min="0"
          type="number"/>
      </el-form-item>

    </el-form>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{ $t('product.cancel') }}</el-button>
      <el-button
        type="primary"
        @click="dialogStatus.indexOf('编辑') == -1?createData():updateData()">{{ $t('product.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { apibase, add, edit,fetch } from '@/api/product'
import ProgressBar from '@/components/Progress'

export default {
  name: 'Smgqform',
  components: {
    ProgressBar
  },
  filters:{
    showMoney:function (status) {
      return status/1000000;
    }
  },
  data() {
    return {
      dialogStatus: '',
      loading:false,
      apibase: apibase,
      addLoading: false,
      dialogFormVisible: false,
      commissionRateGpList:[
        {
          'value':0,
          'label':'系数0-0%'
        },
        {
          'value':1,
          'label':'系数1-20%'
        },
        {
          'value':2,
          'label':'系数2-40%'
        },
        {
          'value':3,
          'label':'系数3-60%'
        },
        {
          'value':4,
          'label':'系数4-80%'
        },
        {
          'value':5,
          'label':'系数5-100%'
        },
      ],
      Form: {
        id:'',
        name: '',
        weigh:0,
        beginMoney: '',
        productDeadline: '',
        manageRate: '',
        incomeExplain: '',
        commissionRateGp:'',
        nbCommissionRateGp:'',
        notice:false,
        coreHighlights: '',
        eduInfo: '',
        productType: '',
        productCategory: '',
        commissionRate: '',
        account: '',
        pdflist: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入产品名', trigger: 'blur' }
        ],
        beginMoney: [
          {required: true, message: '请输入起点', trigger: 'change'},
          {type: 'number', message: '只能输入数字', trigger: 'blur'},
        ],
        manageRate: [
          {required: true, message: '请输入费率', trigger: 'change'},
          {type: 'number', message: '只能输入数字', trigger: 'blur'},
        ],
        commissionRate: [
          {required: true, message: '请输入佣金比例', trigger: 'change'},
          {type: 'number', message: '只能输入数字', trigger: 'blur'},
        ],
      },
      productTypeList: [
        {
          value: '天赋集团'

        },
        {
          value: '其它'

        }
      ]
    }
  },
  methods: {
    resetForm: function() {
      this.Form = {
        id:'',
        name: '',
        weigh:0,
        beginMoney: '',
        productDeadline: '',
        commissionRateGp:'',
        nbCommissionRateGp:'',
        manageRate: '',
        incomeExplain: '',
        notice:false,
        coreHighlights: '',
        eduInfo: '',
        productType: '',
        productCategory: '',
        commissionRate: '',
        account: '',
        pdflist: [],
      };
    },
    createData: function() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.Form.productCategory='私募股权';
          add(this.Form).then((res) => {
            if (res.data.code == 1) {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('submit')
            } else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              })
              return
            }
          }).catch((err) => {
            this.$message({
              showClose: true,
              message: '网络请求失败',
              type: 'error'
            })
            return
          })
        } else {
          setTimeout(() => {
            var isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 1)
          return false
        }
      })
    },
    updateData: function() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.Form.productCategory='私募股权';
          edit(this.Form).then((res) => {
            if (res.data.code == 1) {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('submit')
            } else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              })
              return
            }
          }).catch((err) => {
            this.$message({
              showClose: true,
              message: '网络请求失败',
              type: 'error'
            })
            return
          })
        } else {
          setTimeout(() => {
            var isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 1)
          return false
        }
      })
    },
    formShow: function($row, $option, $type = 0) {
      this.resetForm()
      this.dialogFormVisible = true
      // 编辑
      if ($type) {
        fetch($row).then(res=>{
            if(res.data.code==1){
              this.Form = res.data.data;
            }else{
              this.$message({
                showClose: true,
                message: '获取数据失败',
                type: 'error'
              })
            }
          }
        ).catch(()=>{
          this.$message({
            showClose: true,
            message: '网络请求失败',
            type: 'error'
          })
        });
        this.dialogStatus = '编辑-' + $option
      } else {
        this.Form.productCategory = $option
        this.dialogStatus = '添加-' + $option
      }
    },

    // pdf 设置
    handleAvatarSuccess(response, file, fileList) {
      if (response.code == 1) {
        this.$message({
          showClose: true,
          message: response.msg,
          type: 'success'
        })
        this.Form.pdflist.push({ name: response.data.name, url: response.data.url,size: response.data.size })
        this.loading = false;
      } else {
        this.$message({
          showClose: true,
          message: response.msg,
          type: 'error'
        })
        this.loading = false;
        return
      }
    },
    handleAvatarError(err, file, fileList) {
      this.$message({
        showClose: true,
        message: '文件上传失败',
        type: 'error'
      })
      return
    },
    handleAvatarRemove(file, fileList) {
      this.Form.pdflist = this.Form.pdflist.filter(u => u.uid !== file.uid)
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'application/pdf'
      const isJPG = true
      const isLt2M = file.size / 1024 / 1024 < 150
      if (!isJPG) {
        this.$message.error('上传文件只能是 PDF 格式!')
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 100MB!')
        return false;
      }
      this.loading = true;
      return isJPG && isLt2M
    },
    // end pdf设置
    addSchedule() {
      this.Form.scheduleList.push({
        prices: '',
        detail: ''
      })
    },
    delSchedule(index) {
      // console.log(index);
      this.Form.scheduleList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
  .scheduleInput{
    margin-bottom: 10px;
    margin-right: 30px;
  }
</style>

